<script setup lang="ts">
import { EnumBjlResult } from '@/models/enums/EnumBjlResult';
import { IArrayOption } from '@/models/execute/recmStrategy/ArrayStrategy';
import { reactive } from 'vue';


var option = reactive<IArrayOption>({
    betArray: []
})
const addResult = (result: EnumBjlResult) => {
    option.betArray.push(result);
};
const removeItem = (ele: EnumBjlResult, index: number) => {
    option.betArray.splice(index, 1);
};
</script>

<template>

    <van-form>
        <van-cell-group inset>
            <van-field name="followCount" label="结果">
                <template #input>
                    <van-button type="primary" class="btn X" @click="addResult(EnumBjlResult.X)" />
                    <van-button type="primary" class="btn Z" @click="addResult(EnumBjlResult.Z)" />
                </template>
            </van-field>
            <van-field name="reverse" label="图形">
                <template #input>
                    <span v-for="(ele, index) in option.betArray"
                        :class="['BR', ((ele == EnumBjlResult.Z) ? 'Z' : 'X')]" @click="removeItem(ele, index)"></span>
                </template>
            </van-field>
        </van-cell-group>

    </van-form>

</template>

<style scoped>
.BR {
    width: 15px;
    height: 15px;
    border-radius: 90px;
    margin: 0 3px;
}

.BR.X {
    border: 1px solid blue;
}

.BR.Z {
    border: 1px solid red;
}


.btn {
    height: 30px;
    width: 75px;
    border: none;
    margin: auto;
}

.btn.X {
    background-color: blue;
}

.btn.Z {
    background-color: red;
    ;
}
</style>